<template>
  <div class="person-details">
    <ul>
      <li>姓名：{{ name }}</li>
      <li>年龄：{{ age }}</li>
      <li>性别：{{ gender }}</li>
      <li>专业：{{ major }}</li>
      <li>地址：{{ address }}</li>
      <li>爱好：{{ hobby }}</li>
      <li>成绩：{{ grade }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="PersonDetails">
import { storeToRefs } from "pinia";
import { usePersonInfoStore } from "@/store/personInfo";

const personInfoStore = usePersonInfoStore();
const { name, age, gender, major, address, hobby, grade } =
  storeToRefs(personInfoStore);

//let { name, age, gender, major, address, hobby, grade } = toRefs(person);
</script>

<style scoped>
.person-details {
  background-color: rgb(223, 250, 250);
  padding: 10px;
}
li {
  list-style-type: none;
}
</style>


